<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>animation</title>
    </head>
    <style type="text/css">
        @keyframes mykeyframe {
            0% {
                background: red;
            }
            
            20% {
                background: green;
            }
            
            40% {
                background: blue;
            }
            
            60% {
                background: black;
            }
        }
        .box1 {
            width: 200px;
            height: 200px;
            border: 1px solid;
            margin: auto;
            animation: mykeyframe 10s infinite;
        }
        .box1:hover {
            animation-play-state: paused;
        }
    </style>
    <body>

        <div class="box1">
            
        </div>

        
    </body>
</html>